import React from 'react';
import { observer, inject } from 'mobx-react';
import PageLayout from 'components/layouts/pageLayout';
import { Button, Form, Input, Select } from 'antd';
import { withRouter } from 'react-router-dom';
import css from './index.less';

// import {Form, Input} from 'antd';
const FormItem = Form.Item;
const {Option} = Select;
const {TextArea} = Input;


@withRouter
@inject('store')
@observer
class ItemsEditPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    this.getItemDetail();
  }

  async getItemDetail() {
    const {
      store: { item },
      match: { params: { itemId } }
    } = this.props;

    if (itemId) {
      await item.getItemDetail(itemId);
      this.setValue();
    }

  }

  addAward() {
    this.props.form.validateFieldsAndScroll((err, value) => {
      console.log(err, value);
      if (!err) {
        console.log(value);
        this.props.store.item.addItem(value);
      }
    });
  }

  setValue() {
    const {content, img, number, probability, title, type} = this.props.store.item;
    this.props.form.setFieldsValue({content, img, number, probability, title, type});
  }

  handleSelectChange(value) {
    console.log(value);
    this.props.form.setFieldsValue({
      type: value,
    });
  };

  renderFrom() {
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 }
      }
    };
    console.log(this.props);
    const { getFieldDecorator } = this.props.form;

    return (
      <Form className={css.form}>

        <FormItem
          {...formItemLayout}
          label="奖品名称："
          hasFeedback
          className={css.formItem}
        >
          {getFieldDecorator('title', {
            rules: [
              { required: true, message: '请输入奖品的名称!', whitespace: true },
              { max: 10, message: '标题最大长度为10!' }
            ]
          })(
            <Input placeholder="请填写奖品名称" className={css.input} onFocus={() => (false)}/>
          )}
        </FormItem>

        <FormItem
          {...formItemLayout}
          label="奖品类型："
          hasFeedback
          className={css.formItem}
        >
          {getFieldDecorator('type', {
            rules: [
              { required: true, message: '请输入奖品的数量!', whitespace: true },
            ]
          })(
            <Select onChange={this.handleSelectChange.bind(this)} style={{ width: '100%' }}>
              <Option value="realGoods">实物奖品</Option>
              <Option value="shopCoupon">店铺优惠卷</Option>
              <Option value="tmallCoupon" >天猫优惠劵</Option>
            </Select>
          )}
        </FormItem>

        <FormItem
          {...formItemLayout}
          label="商品数量："
          hasFeedback
          className={css.formItem}
        >
          {getFieldDecorator('number', {
            rules: [
              // { required: true, message: '请输入奖品的数量!', whitespace: true },
            ]
          })(
            <Input placeholder="请填写奖品数量" type="number" min={1} step={1} className={css.input} onFocus={() => (false)}/>
          )}
        </FormItem>

        <FormItem
          {...formItemLayout}
          label="中奖几率(单位 %)："
          hasFeedback
          className={css.formItem}
        >
          {getFieldDecorator('probability', {
            rules: [
              // { required: true, message: '请输入奖品的中奖概率!', whitespace: true },
            ]
          })(
            <Input placeholder="请填写中奖几率" type="number" min={0} max={100} step={0.00001} className={css.input} onFocus={() => (false)}/>
          )}
        </FormItem>

        <FormItem
          {...formItemLayout}
          label="图片链接："
        >
          {getFieldDecorator('img', {
            rules: [
              { required: true, message: '请输入奖品的数量!', whitespace: true },
            ]
          })(
            <Input placeholder="请填写图片链接" className={css.input} onFocus={() => (false)}/>
          )}
        </FormItem>

        <FormItem
          {...formItemLayout}
          label="奖品内容："
        >
          {getFieldDecorator('content', {})(
            <TextArea placeholder="奖品是天猫代金劵时，请将淘口令复制至此！" rows={4} />
          )}
        </FormItem>

      </Form>
    );
  }

  render() {
    const {
      store,
      store: { item },
      match: { params: { itemId } }
    } = this.props;

    return (
      <PageLayout>
        <div className={css.container}>
          {
            this.renderFrom()
          }
          <div className={css.btnBox}>
            <Button type="primary" onClick={this.addAward.bind(this)}>提交</Button>
            <Button onClick={this.setValue.bind(this)}>取消</Button>
          </div>
        </div>
      </PageLayout>
    );
  }
}

const WrappedRegistrationForm = Form.create()(ItemsEditPage);

export default WrappedRegistrationForm;
